<!--
常规列表页面组件
数据： tableData（表格数据）， columnList（设置表格数据）
-->
<template>
  <el-table
    ref="KxTable"
    v-loading="$attrs.loading as boolean"
    class="kx-table"
    :data="tableData"
    :header-cell-style="{ background: '#EBEDF0', color: '#333333' }"
    tooltip-effect="dark"
    stripe
    :row-key="getRowKey"
    v-bind="$attrs"
    @selection-change="handleSelectionChange"
    @row-click="clickRow"
    @row-dblclick="dbClickRow"
  >
    <template v-for="tablec in columnList" :key="tablec.prop">
      <Column :column="tablec" />
    </template>
  </el-table>
</template>

<script lang="ts" setup>
  import { generateUUID } from './tool';
  import { computed } from 'vue';
  import Column from './Column.vue';
  defineOptions({
    name: 'KxTable',
  });
  const props = defineProps({
    columnList: {
      type: Array,
      default() {
        return [
          {
            prop: '',
            label: '',
            sortable: false,
          },
        ];
      },
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
  });
  const columnList: any = computed({
    get: () => {
      return props.columnList;
    },
    set: (val) => {
      return val;
    },
  });
  const emit = defineEmits(['clickRow', 'dbClickRow', 'selectionRow']);
  const clickRow = (row, event) => {
    event && event.stopPropagation && event.stopPropagation();
    emit('clickRow', row);
  };
  const dbClickRow = (row, event) => {
    event && event.stopPropagation && event.stopPropagation();
    emit('dbClickRow', row);
  };
  const handleSelectionChange = (rows) => {
    emit('selectionRow', rows);
  };
  const getRowKey = (row) => {
    return row.id || generateUUID();
  };
</script>

<style lang="less" scoped>
  .kx-table {
    :deep(
        .el-table--striped
          .el-table__body
          tr.el-table__row--striped
          td.el-table__cell
      ) {
      background: #f5f6fa !important;
    }

    :deep(.el-button--primary) {
      // --el-button-border-color: #3c7af6 !important;
      --el-button-bg-color: #fff !important;
    }

    :deep(.el-button--danger.is-plain) {
      --el-button-bg-color: #fff !important;
    }
  }
</style>
